<template>
  <div>
    <a-popover
      v-model="visible"
      trigger="click"
      placement="bottomRight"
      overlayClassName="header-notice-wrapper"
      :getPopupContainer="() => $refs.noticeRef.parentElement"
      :autoAdjustOverflow="true"
      :arrowPointAtCenter="true"
      :overlayStyle="{ width: '400px', top: '50px' }"
    >
      <template slot="content">
        <a-spin :spinning="loading">
          <a-tabs>
            <a-tab-pane tab="系统公告" key="1">
              <a-list>
                <a-list-item v-for="item in systemMsgList">
                  <a-list-item-meta :title="item.msgTitle" :description="item.createTime"
                                    @click="showSysMessage(item)">
                    <a-avatar style="background-color: white" slot="avatar"
                              src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>

                  </a-list-item-meta>
                  <div> <a-tag @click='showSysMessage(item)'>查看</a-tag></div>
                </a-list-item>
              </a-list>
            </a-tab-pane>
            <a-tab-pane tab="个人消息" key="2">
              <a-list>
                <a-list-item v-for="item in personalMsgList">
                  <a-list-item-meta :title="item.msgContent" :description="item.createTime" @click="lookMessage(item)">
                    <a-avatar style="background-color: white" slot="avatar"
                              src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
                  </a-list-item-meta>
                </a-list-item>
              </a-list>
            </a-tab-pane>
            <a-tab-pane tab="维护通知" key="3">
              <a-list>
                <a-list-item v-for="item in systemMaintenanceList">
                  <a-list-item-meta :title="item.msgTitle" :description="item.createTime" @click="lookMessage(item)">
                    <a-avatar style="background-color: white" slot="avatar"
                              src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
                    <a hefr=''>查看</a>
                  </a-list-item-meta>
                </a-list-item>
              </a-list>
            </a-tab-pane>
          </a-tabs>
        </a-spin>
      </template>
      <span @click="fetchNotice" class="header-notice" ref="noticeRef">
      <a-badge :count="noReadNum">
        <a-icon style="font-size: 16px; padding: 4px" type="bell"/>
      </a-badge>
    </span>
    </a-popover>
    <sys-msg-modal ref="sysMsgModal"></sys-msg-modal>
  </div>
</template>
<script>
  import store from '../../store'
  import api from '../../views/module/message/receive/js/api'
  import sysMsgModal from '../SysMsgModal/SysMsgModal'
  import { mapActions } from "vuex"
  /*import SockJS from 'sockjs-client'
  import Stomp from 'stompjs'*/

  export default {
    name: 'HeaderNotice',
    components: { sysMsgModal },
    data() {
      return {
        refs: this.$refs,
        loading: false,
        visible: false,
        lockReconnect: false,
        noReadNum: 0,
        systemMsgList: [],
        personalMsgList: [],
        systemMaintenanceList: []
      }
    },
    methods: {
      ...mapActions(['Logout']),
      fetchNotice() {

        this.visible = !this.visible
        this.getNoReadMessageInfo();
      },
      lookMessage(item) {
        //this.$router.push({ path: 'account/receive/message', params: { msgUserId: item.msgUserId } })
      },
      showSysMessage(item) {
        this.$refs.sysMsgModal.showModal(item.msgId)
        this.changeReadState(item)
      },
      changeReadState(item) {
        this.http.post(this, {
          url: api.receive.setReadState,
          data: { msgUserId: item.msgUserId, readState: 1 },
          success: function(me, data) {
            me.getNoReadMessageInfo()
          }
        })
      },
      getNoReadMessageInfo() {
        this.http.get(this, {
          url: api.receive.getNoReadMessageInfo,
          data: {},
          success: function(me, data) {
            console.log(data)
            me.noReadNum = data.noReadNum
            me.personalMsgList = data.personalMsgList
            me.systemMsgList = data.systemMsgList
            me.systemMaintenanceList = data.systemMaintenanceList
          }
        })
      },
      countDown() {
        let secondsToGo = 30;
        const modal = this.$success({
          title: '系统维护通知',
          content: `系统将于${secondsToGo} 秒后关闭`,
        });
        const interval = setInterval(() => {
          secondsToGo -= 1;
          modal.update({
            content: `系统将于 ${secondsToGo} 秒后关闭.`,
          });
        }, 1000);
        setTimeout(() => {
          clearInterval(interval);
          return this.Logout({}).then(() => {
            setTimeout(() => {
              window.location.reload()
            }, 16)
          }).catch(err => {
            this.$message.error({
              title: '错误',
              description: err.message
            })
          })
          modal.destroy();
        }, secondsToGo * 1000);
      },
      initWebsocket() {
        let that = this
        let socketUrl = this.api.websocket + '/' + store.getters.userId
        socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
        console.log(socketUrl)
        let websocket = new WebSocket(socketUrl)
        //打开事件
        websocket.onopen = function(event) {
          console.log('建立连接')
          websocket.send('客户端发消息到服务端')
        }
        //关闭事件
        websocket.onclose = function(event) {
          console.log('连接关闭')
        }
        //获得消息事件
        websocket.onmessage = function(event) {
          console.log('收到消息：' + event.data)
          let messageInfo = JSON.parse(event.data)
          let typeCode = messageInfo.typeCode
          let msgId = messageInfo.msgId
          if (typeCode == 'SystemMaintenance') {
            that.getNoReadMessageInfo()
            that.countDown();
          } else {
            that.getNoReadMessageInfo()
            that.$notification.success({
              message: '消息通知',
              description: messageInfo.msgContent
            })
          }
        }
        //发生了错误事件
        websocket.onerror = function(event) {
          console.log('websocket 通信发生错误')
        }
      }
    },
    mounted() {

    },
    created() {
      this.getNoReadMessageInfo()
      this.initWebsocket()
    }
  }
</script>

<style lang="css">
  .header-notice-wrapper {
    top: 50px !important;
  }
</style>
<style lang="less" scoped>
  .header-notice {
    display: inline-block;
    transition: all 0.3s;

    span {
      vertical-align: initial;
    }
  }

  .content {
    display: inline;
  }
</style>
